// import React from './react';
// import ReactDOM from './react-dom';
// function App() {
//   const [number1, setNumber1] = React.useState(1);
//   const [number2, setNumber2] = React.useState(0);
//   let handleClick1 = () => setNumber1(number1 +1);
//   let handleClick2 = () => setNumber2(state => state + 1);
//   return (
//     <div>
//       <p>{number1}</p>
//       <button onClick={handleClick1}>+</button>
//       <p>{number2}</p>
//       <button onClick={handleClick2}>+</button>
//     </div>
//   )
// }
// ReactDOM.render(<App />, document.getElementById('root'));



/**
 * 
 * 把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新
 * 把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算
 *
 */
 import React from './react';
 import ReactDOM from './react-dom';
 function Child({ data, handleClick }) {
   console.log('Child render');
   return (
     <button onClick={handleClick}>{data.number}</button>
   )
 }
 const MemoChild = React.memo(Child);
 function App() {
   console.log('App render');
   const [name, setName] = React.useState('zhufeng');//0
   const [number, setNumber] = React.useState(0);//1
   //希望data在App组件重新渲染的时候，如果number变了就变成新的data,如果number没有变，就返回老data
   let data = React.useMemo(() => ({ number }), [number]);//2
   //希望handleClick在App组件重新渲染的时候，如果number变了就返回新handleClick,如果number没有变，就返回handleClick
   let handleClick = React.useCallback(() => setNumber(number + 1), [number]);//3
   return (
     <div>
       <input type="text" value={name} onChange={event => setName(event.target.value)} />
       <MemoChild data={data} handleClick={handleClick} />
     </div>
   )
 }
 //当初次渲染之后hookIndex=4
 
 ReactDOM.render(
   <App />,
   document.getElementById('root')
 );
 

